<template>
  <div id="index">
    <el-row>
      <el-col :span="24"  class="tltleText">
      </el-col>
      <el-col :span="24"  class="chartCenter">
        <el-row>
          <!--中间部分 -->
          <el-col :span="24" id = "center">
            <el-row>
              <el-col :span="24">
                <div class = "chart_center chart_main" style="height: 100vh;margin: 0!important;">
                  <!--中间部分 -->
                  <div class = "chart_center " style="position: absolute;z-index: 100;height:7vh;width:26vw;">
                  </div>
                  <div id="centerContent" >
                    <div class="div1Data">数据量: {{div1Mask}}</div>
                    <div class="div1">区外停车场数据</div>

                    <div class="div2Data">数据量: {{div2Mask}}</div>
                    <div class="div2">停车场数据</div>
                    
                    <div class="div3Data">数据量: {{div3Mask}}</div>
                    <div class="div3">接驳车数据</div>
                    
                    <div class="div4Data">数据量: {{div4Mask}}</div>
                    <div class="div4">公交数据</div>
                   
                    <div class="div5Data">数据量: {{div5Mask}}</div>
                    <div class="div5">路线路况数据</div>
                    
                    <div class="div6Data">数据量: {{div6Mask}}</div>
                    <div class="div6">互联网数据</div>
                    
                    <div class="div7Data">数据量: {{div7Mask}}</div>
                    <div class="div7">闸机数据</div>
                   
                    <div class="div8Data">数据量: {{div8Mask}}</div>
                    <div class="div8">预约登记数据</div>
                    
                    <div class="div9" >悦来交通大数据</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';
  import { TMap } from '../TMap';
  import 'font-awesome/css/font-awesome.min.css';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {config,xAxiss,yAxiss,grid,tooltip,dotHtml,legend} from '../../static/js/config/chartConfig.js';
  import jq from 'jquery';
  import liquidfill from '../../static/js/echarts-liquidfill';
  var echarts = require('echarts');
  export default {
    name:"index",
    components: {

    },
    data(){
      return{
        div1Mask:"16881",
        div2Mask:"16882",
        div3Mask:"16883",
        div4Mask:"16884",
        div5Mask:"16885",
        div6Mask:"16886",
        div7Mask:"16887",
        div8Mask:"16888",
      }
    },
    components: {
    },
    created () {
    },
    mounted () {
    },
    methods: {
    }
  }
</script>
<style lang="scss" scoped>
  #index{
    width: 100%;
    height: 100vh;
    background: #081220;
    *{margin: 0;padding: 0;}
    cursor:pointer;
    .clear{clear:both;}
    #centerContent{
      height: 100vh;
      overflow: hidden;
      background-image: url('../../static/img/indexcenter.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 90% 100%;
      font-size: 0.9vw;
      text-align: center;
      .div1Data,.div2Data,.div3Data,.div4Data,.div5Data,.div6Data,.div7Data,.div8Data{
        color: #52fcfc;
        position: absolute;
      }
      .div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8{
        color: #ffffff;
        position: absolute;
      }
      .div1Data{
        top: 50%;
        left: 12%;
      }
      .div1{
          top: 64.5%;
          left: 11.8%;
      }
      .div2Data{
        top: 34%;
        left: 16.4%;
      }
      .div2{
          top: 46.5%;
          left: 17%;
      }
      .div3Data{
        top: 26%;
        left: 35.5%;
      }
      .div3{
          top: 39%;
          left: 36.2%;
      }
      .div4Data{
        top: 23%;
        right: 34%;
      }
      .div4{
          top: 39%;
          right: 35%;
      }
      .div5Data{
        top: 33%;
        right: 15%;
      }
      .div5{
          top: 47%;
          right: 15%;
      }
      .div6Data{
        top: 51%;
        right: 10%;
      }
      .div6{
        top: 65.5%;
        right: 10.3%;
      }
      .div7Data{
        bottom: 39%;
        left: 34.5%;
      }
      .div7{
        bottom: 23%;
        left: 35.7%;
      }
      .div8Data{
        bottom: 39%;
        right: 31.5%;
      }
      .div8{
        bottom: 25%;
        right: 31.5%;
      }
      .div9{//中心位置'悦来交通大数据'
        position: absolute;
        color: #ffffff;
        top: 42%;
        right: 43%;
        font-size: 1.7vw;
      }

    }
  }
</style>
